<template>
	<view>
		<topNav name="input"></topNav>
		<view class="forum_main">
			<view class="chatHeader">
				<uni-transition class="chatHeader_background" ref="ani" :show="true"/>
				<view class="chatHeader_content">
					<view @click="run(0)" class="chatHeader_item">消息</view>
					<view @click="run(1)" class="chatHeader_item">联系人</view>
				</view>
			</view>
			<swiper
			class="chat_swiper"
				:current="index_num"
				@change="swiperchange"
			>
				<swiper-item><chatDiv name= "forum"></chatDiv></swiper-item>
				<swiper-item><view class="mychat">聊天</view></swiper-item>
			</swiper>
		</view>
		
	</view>
</template>

<script>
	import topNav from "../../template/tabNav/titleNViews.vue";
	import chatDiv from "../../template/chat/chatPage.vue";
	export default{
		components: {
			topNav,
			chatDiv
		},
		data() {
			return {
				index_num: 0,
			}
		},
		methods: {
				run(e) {
					if(e==0){
						console.log(0)
						// 同时左平移到 10vw
						this.$refs.ani.step({
							translateX: '0vw',
						})
						this.index_num = 0
					}else{
						console.log(1)
						// 同时右平移到 10vw
						this.$refs.ani.step({
							translateX: '12vw',
						})
						this.index_num = 1
					}
					
					// 开始执行动画
					 this.$refs.ani.run(()=>{
					})
				},
				swiperchange(e){
					this.run(e.detail.current);
				}
			}
	} 
</script>

<style>
	topNav{
		height: 10%;
	}
	.forum_main{
		height: 90%;
	}
	.chatHeader{
		display: flex;
		flex-direction: row;
		width: 24vw;
		height: 5vh;
		background-color: #07ffad91;
		border-radius: 2.5vh;
		margin: 0 auto;
		
	}
	.chatHeader_item{
		height: 5vh;
		width: 12vw;
		line-height: 5vh;
		font-weight: 600;
		color: #1b1a19f2;
		text-align: center;
		border-radius: 2.5vh;
	}
	
	.chatHeader_background{
		height: 5vh;
		width: 12vw;
		border-radius: 2.5vh;
		background-color: #b063ff8a;
		
	}
	.chat_swiper{
		height: 83.8vh;
	}
	.chatHeader_content{
		display: flex;
		flex-direction: row;
		position: absolute;
	}
	.mychat{
		background-color: #95ff0b;
		height: 83.8vh;
	}
</style>